import { scheduleProjectService, ScheduleProjectUpdateDTO, ScheduleProjectVO } from '@/services/SchduleService'

import {
  ModalForm,
  PageContainer,
  ProColumns,
  ProCoreActionType,
  ProFormDigit,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components'
import { Button, message, Space } from 'antd'

import { observer } from 'mobx-react-lite'
import { ReactNode } from 'react'

const Options = (dom: ReactNode, entity: ScheduleProjectVO, index: number, action?: ProCoreActionType) => {
  return (
    <Space key={entity.id}>
      <Button type="link">编辑</Button>
      <Button type="link" danger>
        删除
      </Button>
    </Space>
  )
}

const ScheduleProjectUpdateModal = ({ vo }: { vo?: ScheduleProjectVO }) => {
  let dto: ScheduleProjectUpdateDTO = {
    createTime: '',
    desc: '',
    name: '',
    priorityLimit: 0,
    status: false,
    ...vo,
  }
  const trigger = vo ? <Button type="link">修改</Button> : <Button type="primary">新建档期</Button>
  return (
    <ModalForm<ScheduleProjectUpdateDTO>
        width={400}
      title={vo ? '修改档期' : '新建档期'}
      trigger={trigger}
      modalProps={{
        destroyOnClose: true,
      }}
      initialValues={dto}
      onFinish={async (data) => {
        let res
        if (vo) {
          res = await scheduleProjectService.update(data)
        } else {
          res = await scheduleProjectService.save(data)
        }

        if (res) {
          message.success('操作成功')
        }
        return res !== undefined
      }}
    >
      <ProFormText label="项目名称" name="name" />
      <ProFormDigit label="优先数量" name="priorityLimit" />
    </ModalForm>
  )
}

let columns: ProColumns<ScheduleProjectVO>[] = [
  { dataIndex: 'id', title: '编号', fixed: 'left' },
  { dataIndex: 'name', title: '项目名称', width: 200 },
  { dataIndex: 'priorityLimit', title: '优先排挡数量', width: 200 },
  { dataIndex: 'createTime', title: '创建时间', width: 200 },
  { dataIndex: 'status', title: '状态', valueType: 'switch', width: 200 },
  { dataIndex: 'headImg', title: '头图' },
  { title: '操作', render: (dom, entity, index, action) => <ScheduleProjectUpdateModal key="edit" vo={entity} /> },
]

const actions = [<ScheduleProjectUpdateModal key="update" />]
const ScheduleProject = () => {
  return (
    <PageContainer>
      <ProTable<ScheduleProjectVO>
        toolbar={{
          actions: actions,
        }}
        columns={columns}
        request={scheduleProjectService.page}
      />
    </PageContainer>
  )
}

export default observer(ScheduleProject)
